<template>
  <div :class="statusClass">{{ statusName }}</div>
</template>

<script setup>
import { onMounted, reactive, toRefs, ref, computed } from "vue";
const props = defineProps({
  // 状态code
  status: {
    type: String,
    default: ""
  },
  // 状态类型： 签核SIGN、交接HANDOVER
  type: {
    type: String,
    default: "HANDOVER"
  }
});

const statusClass = computed(() => {
  let cn = [];
  if (props.type == "SIGN") {
    cn.push("status-sign");
    if (props.status) {
      switch (props.status) {
        case "CONFIRMED":
          cn.push("status-2");
          break;
        case "TO_BE_CONFIRMED":
          cn.push("status-1");
          break;
        case "PASS":
          cn.push("status-2");
          break;
        case "REJECTED":
          cn.push("status-3");
          break;
      }
    }
  } else {
    cn.push("status");
    switch (props.status) {
      case "UN_SUBMITTED":
        cn.push("status-0");
        break;
      case "SUBMITTED":
        cn.push("status-1");
        break;
      case "TO_BE_CONFIRMED":
        cn.push("status-3");
        break;
      case "CONFIRMED":
        cn.push("status-2");
        break;
      case "PASS":
        cn.push("status-2");
        break;
      case "REJECTED":
        cn.push("status-4");
        break;
      default:
        cn.push("status-0");
        break;
    }
  }

  return cn.join(" ");
});
const statusName = computed(() => {
  let name = "";
  switch (props.status) {
    case "UN_SUBMITTED":
      name = "未提交";
      break;
    case "SUBMITTED":
      name = "已提交";
      break;
    case "TO_BE_CONFIRMED":
      name = "待确认";
      break;
    case "CONFIRMED":
      name = "已确认";
      break;
    case "PASS":
      if (props.type == "SIGN") {
        name = "已确认";
      } else {
        name = "交接通过";
      }
      break;
    case "REJECTED":
      name = "已驳回";
      break;
  }
  return name;
});
</script>

<style lang="scss" scoped>
.status {
  position: relative;
  padding-left: 16px;

  &::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 8px;
    height: 8px;
    content: "";
    background: #3b82f6;
    border-radius: 8px;
  }
  // 待提交
  &.status-0 {
    color: #bcbcbc;

    &::before {
      background: #bcbcbc;
    }
  }
  // 已提交
  &.status-1 {
    color: #3b82f6;

    &::before {
      background: #3b82f6;
    }
  }
  // 交接通过
  &.status-2 {
    color: #10b981;

    &::before {
      background: #10b981;
    }
  }
  // 待确认
  &.status-3 {
    color: #f59e0b;

    &::before {
      background: #f59e0b;
    }
  }
  // 已驳回
  &.status-4 {
    color: #ef4444;

    &::before {
      background: #ef4444;
    }
  }
}

.status-sign {
  width: 64px;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  border-radius: 4px;

  &.status-1 {
    background: #f59e0b;
  }

  &.status-2 {
    background: #10b981;
  }

  &.status-3 {
    background: #ef4444;
  }
}
</style>
